<template>
	<view>
			<view class="u-page">
				<view class="listItems">
					<view class="listItem" @click="getUserProfile()">
						<view class="name">头像</view>
						<view class="value">
							<view class="avatar" v-if="userInfo.avatar || avatarGot">
								<image :src="getFmtImage(userInfo.avatar)" mode="aspectFill"></image>
							</view>
							<view class="avatar" v-else>
								<image src="/static/imgs/avatar.png" mode="aspectFill"></image>
							</view>
						</view>
					</view>
					<view class="listItem">
						<view class="name">姓名</view>
						<view class="value">{{userInfo.userName}}</view>
					</view>
                    <view class="listItem">
                    	<view class="name">性别</view>
                    	<view class="value">{{userInfo.sex | getSex(userInfo.idCardNum)}}</view>
                    </view>
                    <view class="listItem">
                    	<view class="name">身份证号</view>
                    	<view class="value">{{userInfo.idCardNum}}</view>
                    </view>
                    <view class="listItem">
                    	<view class="name">所属班级</view>
                    	<view class="value">{{userInfo.className}}</view>
                    </view>
					<view class="listItem">
                    	<view class="name">手机号</view>
                    	<view class="value">{{userInfo.phone}}</view>
                    </view>
                   
					<!-- <view class="listItem" @click="myQrCode()">
						<view class="name">我的个人码</view>
						<view class="value">
							<view class="ma">
								<image src="/static/imgs/qr.png" mode=""></image>
							</view>
						</view>
						<view class="icon">
							<u-icon name="arrow-right" size="18"></u-icon>
						</view>
					</view> -->
				</view>
				
				<view class="gap"></view>
				
				<!-- <view class="listItems">
					<view class="listItem" @click="doFaceRz()">
						<view class="name">实名认证</view>
						<view class="value">
							<text class="has" v-if="userInfo.rz">已认证</text>
							<text v-else>未认证</text>
						</view>
						<view class="icon" v-if="!userInfo.rz">
							<u-icon name="arrow-right" size="18"></u-icon>
						</view>
					</view> 
				</view> -->
                
                <!-- <view class="btn-leave" @click="editUserInfo()"> 信息编辑 </view> -->
					
			</view>
	</view>
</template>
<script>
	import { mapState, mapMutations } from 'vuex';
	import sceneMixins from '@/utils/sceneMixins';
	import faceValidate from './faceValidate.js';
	export default {
		options: { styleIsolation: 'shared' },
		mixins: [sceneMixins, faceValidate],
		computed: {
			...mapState(['userInfo', 'openId'])
		},
		data() {
			return {
				API_PREFIX: this.API_PREFIX,
				defaultAvatar: this.API_PREFIX + '/mobile/wxImages/mime/avatar.png',
				avatarGot: false
			}
		},
		onLoad() {
		},
        onShow () {
           if (global.listPageNeedReload) {
                this.doWxLogin(true);
           } 
        },
		filters: {
			getSex: function (v, v2) {
				if (!v && v2) {
					var last2 = v2.slice(-2, -1);
					return last2 ? ((last2 % 2) ? '男' : '女') : '';
				}
			}
		},
		methods: {
			...mapMutations(['afterGetUserProfiole']),
			myQrCode: function () {
				uni.navigateTo({
					url: '/pages/mine/code'
				})
			},
			doFaceRz: function () {
				if (!this.userInfo.rz) {
					this.startFaceValidate();
				}
			},
            editUserInfo: function () {
                uni.navigateTo({
                    url: '/pages/shenbao/index?loadJSON=/wxAssets/wxJSON/用户信息编辑.json'
                })
            }
		}
	}
</script>

<style lang="scss" scoped>
	.listItems {
		background: #fff;
		.listItem {
			height: 80rpx;
			line-height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			margin: 0 10rpx;
			border-bottom: 1px solid $lw_text_4;
			padding: 0 20rpx;
			.name {
				
			}
			.value {
				color: $lw_text_3;
				margin-left: auto;
				.avatar-open {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					overflow: hidden;
				}
				.avatar {
					display: flex;
					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						// overflow: hidden;
					}
				} 
				.ma {
					display: flex;
				image {
					width: 44rpx;
					height: 44rpx;
					filter: brightness(0.7);
				}}
				.has {
					color: #ffaa00;
				}
			}
			.icon {
				transform: translateX(10px);
			}
		}
	}
	.gap {
		height: 20rpx;
	}
    .btn-leave {
      width: 670rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      color: #fff;
      font-size: 32rpx;
      background-image: linear-gradient(0deg, #e6652f 0%, #ef9040 100%),
        linear-gradient(#078ff5, #078ff5);
      background-blend-mode: normal, normal;
      border-radius: 14rpx;
      margin: 0 auto;
      margin-top: 100rpx;
    }
</style>
